<template>
<div>
    <!-- 导航栏 -->
     <Navbar />
    
     <h4 class="title">{{ title }}</h4>
     <p class="info">
        <span>作者：{{ author }}</span>
        <span>浏览次数：{{ visits }}</span>
        <van-button type="primary" size="small" @click="router.back()">返回</van-button>
     </p>

     <hr>

     <div class="content" v-html="content"></div>

     <!-- 底部导航栏 -->
      <Tabbar />
</div>
</template>

<script setup>
import Navbar from '@/components/Navbar.vue';
import Tabbar from '@/components/Tabbar.vue';
import { useRouter } from "vue-router";
import axios from 'axios';
import { onMounted, ref } from "vue";

const router = useRouter();
const id = router.currentRoute.value.params.id;
const title = ref('');
const author = ref('');
const visits = ref(0);
const content = ref('');

function getMessageDetail(itemId) {
    axios.get("https://cnodejs.org/api/v1/topic/" + itemId).then((result) => {
        // console.log(result.data.data);
        title.value = result.data.data.title;
        author.value = result.data.data.author.loginname;
        visits.value = result.data.data.visit_count;
        content.value = result.data.data.content;
    });
}

onMounted(() => {
    getMessageDetail(id);
});

</script>

<style scoped>
.title {
    text-align: center;
    font-size: 20px;
    margin: 20px 20px;
}
.info {
    display: flex;
    justify-content: space-between;
    margin: 20px 20px;
}
.content {
    margin: 20px 20px;
}
</style>